<template>
<!--  <div class="home">-->
  <div>
<!--    <img alt="Vue logo" src="../assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button>其它</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder=" 请输入关键字" style="width:30%"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="list">查询</el-button></div>
    <el-table :data="tableData" stripe style="width: 95%">
      <el-table-column
          prop="id"
          label="ID" sortable
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="家居名" >
      </el-table-column>
      <el-table-column
          prop="maker"
          label="厂家">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="sales"
          label="销量">
      </el-table-column>
      <el-table-column
          prop="stock"
          label="库存">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button @click="handleEdit2(scope.row)" type="primary">编辑</el-button>
<!--          <el-button @click="del(scope.row)" type="text" >删除</el-button>-->
          <el-popconfirm
              title="确定删除吗？" @confirm="del(scope.row)">
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3,5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      </div>


    <el-dialog title="提示"  v-model="dialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="家居名" prop="name">
          <el-input v-model="form.name" style="width: 80%"></el-input>
          {{this.validMsg.name}}
        </el-form-item>
        <el-form-item label="厂商" prop="maker">
          <el-input v-model="form.maker" style="width: 80%"></el-input>
          {{this.validMsg.maker}}
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" style="width: 80%"></el-input>
          {{this.validMsg.price}}
        </el-form-item>
        <el-form-item label="销量" prop="sales">
          <el-input v-model="form.sales" style="width: 80%"></el-input>
          {{this.validMsg.sales}}
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.stock" style="width: 80%"></el-input>
          {{this.validMsg.stock}}
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="save">确定</el-button></span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import request from "@/utils/request";
export default {
  name: 'HomeView',
  components: {
    //HelloWorld
  },
  data() {
    return {
      validMsg:{},
      currentPage: 1,
      pageSize: 5,
      total: 10,
      form:{},
      dialogVisible : false,
      search:'',
      tableData: [],
      rules: {
        name: [
          {required: true, message: '请输入称家居名', trigger: 'blur'}
        ],maker: [
          {required: true, message: '请输入称制造商', trigger: 'blur'}
        ],price: [
          {required: true, message: '请输入价格', trigger: 'blur'}, {pattern: /^(([1-9]\d*)|(0))(\.\d+)?$/, message: '请输入数字', trigger: 'blur'}
        ],sales: [
          {required: true, message: '请输入销量', trigger: 'blur'}, {pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur'}
        ],stock: [
          {required: true, message: '请输入库存', trigger: 'blur'}, {pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur'}
        ]
      }
    }
  },
  created(){
    this.list()
  },
  methods:{
    // handleEdit(row){
    //   // console.log("row=",row)
    //   // console.log("row2=",JSON.stringify(row))
    //   // console.log("row2=",JSON.parse(JSON.stringify(row)))
    //   this.form = JSON.parse(JSON.stringify(row))
    //   this.dialogVisible = true
    // },
    handleEdit2(row){
      request.get("/api/select/" + row.id).then(res =>{
        // console.log("res=",res)
        if(res.code === "200"){
          this.form = res.data

        }else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.dialogVisible = true
      })
    },
    add(){
      this.dialogVisible = true
      this.form = {}
      if(this.$refs['form'] != null){
        this.$refs['form'].resetFields()
      }
      this.validMsg = {}
    },
    save(){
      if(this.form.id){
        request.put("/api/update",this.form).then(res =>{
          // console.log("res=",res)
          if(res.code === "200"){
            this.$message({
              type:"success",
              message:"更新成功"
            })
          }else {
            this.$message({
              type:"error",
              message:"更新失败"
            })
          }
          this.dialogVisible = false
          this.list()
        })

      }else {
        this.$refs['form'].validate((valid)=>{
          // valid = true;
          if(valid){
            request.post("/api/save",this.form).then(res =>{
              if(res.code === "200"){
                console.log("res=",res)
                this.dialogVisible = false
                this.list()
              }else if(res.code === "400"){
                this.validMsg.name = res.data.name
                this.validMsg.maker = res.data.maker
                this.validMsg.price = res.data.price
                this.validMsg.sales = res.data.sales
                this.validMsg.stock = res.data.stock
              }
            })
          }else {
            this.$message({
              type:"error",
              message:"验证未通过，禁止提交"
            })
            return false;
          }
        })
      }
    },
    list(){
      request.get("/api/pageFurnByCondition2",{params:{
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        search: this.search
      }}).then(res =>{
        // console.log("res=",res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    del(row){
      request.delete("/api/delete/" + row.id).then(res =>{
        // console.log("res=",res)
        if(res.code === "200"){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else {
          this.$message({
            type:"error",
            message: res.msg
          })
        }
        this.list()
      })
    },
    handlePageSizeChange(pageSize){
      // alert(pageSize)
      this.pageSize = pageSize
      this.list()
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage
      // alert(currentPage)
      this.list()
    }
  }
}
</script>
